<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <title>城市新地标：艺术中心盛大开幕</title>
    <style>
        /* 自定义滚动条样式 */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        ::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        /* 导航栏动画效果 */
        nav {
            transition: background-color 0.3s ease;
        }

        nav:hover {
            background-color: #f9fafb;
        }

        /* 新闻内容区域动画效果 */
        #news-content {
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.8s ease forwards;
        }

        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 新闻标题样式 */
        #news-content h1 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            color: #1f2937;
            transition: color 0.3s ease;
        }

        #news-content h1:hover {
            color: #3b82f6;
        }

        /* 新闻正文样式 */
        #news-content p {
            font-size: 1.125rem;
            line-height: 1.75;
            color: #4b5563;
        }

        /* 新闻图片样式 */
        #news-content img {
            width: 100%;
            height: auto;
            object-fit: cover;
            border-radius: 0.5rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        #news-content img:hover {
            transform: scale(1.02);
        }
    </style>
</head>

<body class="bg-gray-50 font-sans">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-md sticky top-0 z-10">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <a href="#" class="text-xl font-bold text-gray-800">新闻平台</a>
            <div class="flex space-x-4">
                <a href="news.html" class="text-gray-600 hover:text-gray-800">首页</a>
            </div>
        </div>
    </nav>

    <!-- 新闻内容展示区域 -->
    <div id="news-content" class="container mx-auto px-4 py-16 max-w-3xl">
        <!-- 新闻内容将通过 AJAX 动态插入 -->
    </div>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-6">
        <div class="container mx-auto px-4 text-center">
            <p>&copy; 2025 新闻平台. 保留所有权利</p>
        </div>
    </footer>

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script>
        getNewsText();
        function getNewsText() {
            $.ajax({
                type: "get",
                url: "/news/getNewsText" + location.search,
                success: function (result) {
                    var finalHtml = "";
                    if (result != null) {
                        finalHtml += '<h1>' + result.title + '</h1>';
                        finalHtml += '<p>' + result.newsContent + '</p>';
                    }
                    $("#news-content").html(finalHtml);
                },
                error: function (error) {
                    if (error.status == 401) {
                        //用户未登录
                        location.href = "login.html";
                    }
                }
            });
        }
    </script>
</body>

</html>